<template>
    <div class="searchResult">
        <mt-search
            v-model="value"
            cancel-text="取消"
            placeholder="搜索"
            :result="newResult"
            >

        </mt-search>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value:'',
                results:['hello','很高兴认识你','我是程序员','我是前端','123456'],
                newResult:[],//收索结果匹配的列表
            }
        },
        watch:{ //监听value值的改变，对应搜索结果的值
            value :function(newVal){
                this.newResult = [];
                this.results.forEach(item =>{   
                    //console.log(item);               
                    if(item.search(this.value) != -1){                      
                        this.newResult.push(item);                    
                    }
                });
            }

        }
    }
</script>

<style lang="less">
    .searchResult{
        input[type=search] {
            font-size: 16px;
            height: 28px;
            border: 0;
            border-radius: 0;
            background-color: rgba(0,0,0,0);
            margin-bottom: 0;
            padding: 0 0 0 8px;
        }
        .mintui-search{
            font-size: 16px;
        }
        .mint-cell {
            top: 40px;
        }
    }
</style>
